<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"><!--字符集是utf-8-->
		<title>数据可视化直方图</title>
		<style>
			.top {
			  /* float: left; */
			  width: 100%;
			  height: 500px;
			  /* top: 200px; */

			  /* background-color: red; */
			}
			.bottom {
			  /* background-color: orange; */
			  /* margin-top: 510px; */
			  top: 510px;
			  margin-left: 50px;
			  width: 100%;
			  height: 500px;
			}

			.in-left {
				float: left;
				width: 390px;
				height: 400px;
			}

			.in-right{
				height: 400px;
				/* vertical-align: middle; */
				margin-left: 420px;

				/* float: right; */
			}

			.btn{
				width: 400px;
				height: 400px;
				font-size: 130px;
				/* margin: auto; */
				/* vertical-align: center; */
			}
			.in-h1{
				font-size: 120px;
				/* margin-top:350px; */
				/* left:50%; */
			}

		</style>
	</head>
		  <div class="top">
			<div class="in-left">
				<input  id="button" type="button" class="btn" value="掷色子" onclick="buttonClick();">
			</div>

			<div class="in-right">
				<h1 id="info" class="in-h1"></h1>
			</div>
			
			
		  </div>
		  
		  <div class="bottom">
			<center><svg id="mySVG" width="100%" height="500px" version="1.1"></svg></center>

		  </div>
		
		
		

		<!-- //<input  id="button_update" type="button" value="更新" onclick="buttonUpdateClick();">   -->

		
		<script type="text/javascript">
			var result = new Array();
			for (var i = 0; i <=10; i++){
				result[i] = 0;
			}
			function draw(result){
				var mysvg = document.getElementById("mySVG");
				var rec = new Array();//定义一个新的数组
				var txt = new Array();//定义一个新的数组
				var sum = new Array();
				for (var i=0;i<=10;i++){//循环
					rec[i] = document.createElement("rect");//创建标签rect
					txt[i] = document.createElement("text");//创建标签text
					sum[i] = document.createElement("text");
					mysvg.appendChild(rec[i]);
					mysvg.appendChild(txt[i]);
					mysvg.appendChild(sum[i]);
					//var h = Math.random()*255;//定义高度
					var h = result[i];
					// var r = Math.floor(Math.random()*255);//定义颜色
					// var g = Math.floor(Math.random()*255);
					// var b = Math.floor(Math.random()*255);//随机颜色
					var text_pos_x = 130*i;
					if(h>=10) text_pos_x -=35;

					var sum_pos_x = 130*i;
					if(i+2>=10) sum_pos_x -=35;

					rec[i].outerHTML="<rect x="+130*i+" y="+(470-5*h)+" width='50px' height="+5*h+" style='fill:rgb("+0+","+0+","+255+")'/>";//设置页面展示，还有填充色。
					txt[i].outerHTML="<text x="+(text_pos_x)+" y="+(460-5*h)+" font-size=100>"+h+"</text>";//设置页面展示，x控制全部数字移动的位置，y控制条形图的高度，还有数字填充。
					sum[i].outerHTML="<text x="+(sum_pos_x)+" y="+(570)+" font-size=100>"+(i+2)+"</text>";
				}
			}
			

			function buttonClick(){
				var d1 = rand(1, 6);
				var d2 = rand(1, 6);
				var sum = d1 + d2;
				result[sum-2] += 1;
				var str = "<h1>" +d1+ " + "+d2+" = "+sum + "</h1>";
				document.getElementById("info").innerHTML = str;
				ReplaceContentInContainer("mySVG", document.getElementById("mySVG"));  
				//document.write(str);  
            	//draw(result);  
        	}
			// //function buttonUpdateClick(){  
            // 	ReplaceContentInContainer("mySVG", document.getElementById("mySVG"));  
        	// }    
			function ReplaceContentInContainer(id,content) {
                var container = document.getElementById(id);
				container.innerHTML = content;
				draw(result);
                
            }
			// 生成随机数
			function rand(min,max){
				if (min>max) {
				var mid = min;
				min = max;
				max = mid;
				}
				//65<=Math.random()*26+65<26+65
				return parseInt(Math.random()*(max-min+1)+min);
			}
		</script>
	</body>
</html>